<template>
  <div>
    <!-- 搜索页面 -->
    <!-- 组件：用于搜索场景的输入框组件。 -->
    <!-- v-fofo : 自定义指令，给标签扩展额外的功能 -->
    <!-- search : 确定搜索时触发 -->
    <van-search
      v-model="kw"
      shape="round"
      background="#007bff"
      placeholder="请输入搜索关键词"
      v-fofo
      @input="inputFn(kw)"
      @search="searchFn"
    >
      <template #left>
        <!-- 回退图标 -->
        <van-icon
          name="arrow-left"
          color="white"
          size="0.48rem"
          style="padding-right: 0.333rem"
          @click="$router.back('./home')"
        />
      </template>
    </van-search>

    <!-- 联想列表---铺设数据-suggestList['字符串','','',...] 遍历显示-->
    <!-- 搜索建议列表 -->
    <div class="sugg-list" v-if="kw.length !== 0">
      <div
        class="sugg-item"
        v-for="(str, index) in suggestList"
        :key="index"
        v-html="lightStr(str)"
        @click="suggeestClickFn(str)"
      ></div>
      <!--  搜索建议 调用高亮方法 {{lightStr(str)}}给方法传参str 【建议】字符串-->
    </div>

    <!-- 搜索历史 -->
    <div class="search-history" v-else>
      <!-- 标题 -->
      <van-cell title="搜索历史">
        <!-- 使用 right-icon 插槽来自定义右侧图标 -->
        <!-- 清空历史记录 -->
        <template #right-icon
          ><van-icon name="delete" class="search-icon" @click="clearHistoryFn"/>
        </template>
      </van-cell>

      <!-- 历史列表 -->
      <div class="history-list">
        <span
          class="history-item"
          v-for="(str, index) in historyList"
          :key="index"
          @click="historyItemFn(str)"
          >{{ str }}</span
        >
      </div>
    </div>
  </div>
</template>

<script>
import { suggestListAPI } from '@/api/index.js'
export default {
  data () {
    return {
      kw: '', // 搜索框关键字
      timer: null, // 保存定时器
      suggestList: [], // 联想菜单列表
      // 初始化搜索历史-从本地取出历史记录数组
      historyList: JSON.parse(localStorage.getItem('history')) || []// 搜索历史---从本地保存的JSON字符串-拿过来存到历史列表里，遍历铺设数据
    }
  },
  methods: {
    // input事件--输入框改变--防抖操作-定时后在触发逻辑代码，清空上一次定时器，会降低逻辑大妈的触发频率（节约性能和流量）
    inputFn (value) {
      // value ---传参---关键字 kw
      clearTimeout(this.timer)
      this.timer = setTimeout(async () => {
        console.log('用户输入内容：' + value)
        if (this.kw.length > 0) {
          // 判断用户输入关键词之后再发请求-没有输入不发请求
          const res = await suggestListAPI(this.kw) // 请求联想列表时传入关键词
          console.log(res) // 打印 看一下 option 数组里面有没有值,后台怎么给就怎么写
          if (res.data.data.options[0] === null) {
            // 数组里有一个值为空，Array(1) = [null]； Array(0) = [] 直接空数组-->options === []
            this.suggestList = [] // 没有联想搜索词的时候，后台的options为空，用空数组接着
          } else {
            this.suggestList = res.data.data.options
          }
        } else {
          this.suggestList = [] // 输入框无值，联想列表为空
        }
      }, 500)
    },
    // 与关键字相同的联想列表字符-高亮
    lightStr (targetStr) {
      // 加标签 <span style="color:red">关键字</span>
      /*  const reg = new RegExp(this.kw, 'g') // 正则对象 this.kw---> reg
      return targetStr.replace(reg, `<span style="color:red">${this.kw}</span>`) // 字符串替换--把每一个联想菜单字符串里-只一个关键字改色
      */

      // 大写关键字保留大写--要用匹配到的原来的字符--而不是输入框关键字
      const reg = new RegExp(this.kw, 'ig') // 正则对象 this.kw---> reg
      return targetStr.replace(reg, (substring) => {
        // substring : 正则匹配到的要被替换的 “字符”
        return `<span style="color:red">${substring}</span>`
      })
    },
    // （1）- 回车搜索事件-点击搜索-搜索内容存入本地---去重Set([数组])--跳转传参 (传的是kw)
    searchFn () {
      if (this.kw.length > 0) {
        this.historyList.push(this.kw) // 关键字存入历史列表里
        // localStorage.setItem('history', JSON.stringify(this.historyList)) // 以JSON字符串格式存入本地

        this.historyList = [...new Set(this.historyList)] // let a = new Array 定义数组-语法糖 Set([])去重
        // 先跳转了, watch还没执行呢(当前页面切走了, 销毁了, watch里没往本地存)-->异步-输入内容先存本地之后在跳转
        setTimeout(() => {
          this.$router.push(`/search/${this.kw}`)
        }, 0)
      }
    },
    // （2）联想菜单-点击事件-// - 联想菜单项, 点击跳转传参
    suggeestClickFn (str) {
      this.historyList.push(str) // 联想字符串也存到历史列表
      this.historyList = [...new Set(this.historyList)]
      // localStorage.setItem('history', JSON.stringify(this.historyList))

      setTimeout(() => {
        this.$router.push(`/search/${str}`)
      }, 0)
    },
    // （3）点击历史记录, 跳转结果页
    historyItemFn (str) {
      setTimeout(() => {
        this.$router.push(`/search/${str}`)
      }, 0)
    },
    // 点击图标---清空历史记录
    clearHistoryFn () {
      this.historyList = []
      localStorage.setItem('history', JSON.stringify(this.historyList)) // []
    }
  },
  // 侦听数组变化--去重
  watch: {
    historyList () {
      /*
      // 方法1：遍历+判断+新数组
      const newArr = []
      // 遍历历史记录数组 --数组每一项字符串
      this.historyList.forEach(Str => {
        const index = newArr.findIndex(newStr => newStr === Str) // 第一次查找: 不等-> 索引-1，追加进新数组里。查找到的索引>0,说明有重的
        if (index === -1) { // 搜索历史在新数组没找到
          newArr.push(Str) // 把搜索历史数组里面不重复的字符串追加给新数组
        }
      })
      // 存到本地
      console.log(newArr)
      localStorage.setItem('history', JSON.stringify(newArr))
      */
      // 方法2：Set是一种集合
      // 口诀: 无序不重复的 value 集合体
      // 带着重复元素的historyList装入Set中, 去重, 打散开, 形成新的数组, 覆盖页面上使用historyList
      localStorage.setItem('history', JSON.stringify(this.historyList))
    }
  }
}
</script>

<style scoped lang='less'>
/* 回退图标 14px */
/* .iconleft{
     padding-left: .333rem;
 } */
/*搜索建议列表样式 */
.sugg-list {
  .sugg-item {
    padding: 0 15px;
    border-bottom: 1px solid #f8f8f8;
    font-size: 14px;
    line-height: 50px;
    // 实现省略号的三行代码
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

/**搜索历史 */
.search-icon {
  font-size: 16px;
  line-height: inherit;
}

.history-list {
  padding: 0 10px;
  .history-item {
    display: inline-block;
    font-size: 12px;
    padding: 8px 14px;
    background-color: #efefef;
    margin: 10px 8px 0px 8px;
    border-radius: 10px;
  }
}
</style>
